<template>
	<!-- 通用查询 -->
	<view class="main">
		<view v-show="isShowPage">
			<view class="second">
				<image src="https://app.asy315.vip/s/m/images/query_img_cn.png" mode="widthFix" style="width: 100%;"
					@click="toAsy"></image>
				<view class="inputView">
					<u-form :model="form" ref="uForm" rules="rules" class="form">
						<u-form-item label=" " prop="code" label-width="0">
							<u-input v-model="form.code" placeholder="请输入防伪码" class="input" type="number" :border="true"
								border-color="#d0d0d0" height="60" />
						</u-form-item>
					</u-form>
					<u-button :custom-style="queryBtn" @click="search">
						<u-icon name="search"></u-icon>
					</u-button>
					<image src="https://app.asy315.vip/s/m/images/scan.png" mode="widthFix" style="width: 60rpx;"
						@click="scanCode(true)">
					</image>
				</view>
			</view>
			<view class="third">
				<view class="content" v-if="info.code.length>0">
					<view class="contentView" v-if="info.code.length>0">
						<view class="imgView">
							<image :src="imgSrc" mode="widthFix" :style="{'width': (imgWidth ? '100%':'50%')}"
								@click="preview"></image>
						</view>
						<view class="infoView">
							<view class="info" v-if="info.customer.nameCn">
								<view class="left">公司名称</view>
								<view class="right" v-html="info.customer.nameCn"></view>
							</view>
							<view class="info" v-if="info.customer.phone">
								<view class="left">电话号码</view>
								<view class="right">
									<a style="color: rgb(41, 121, 255);text-decoration: none;"
										:href="'tel:' + info.customer.phone">{{info.customer.phone}}</a>
								</view>
							</view>
							<view class="info">
								<view class="left code">防伪码</view>
								<view class="right" v-if="info.code.length>0">
									<view class="info-line">
										<text v-for="(item,index) in info.code" :key="index"
											:class="item.class">{{item.value}}</text>
										<image v-if="isRight" src="https://app.asy315.vip/s/m/images/tick.png"
											mode="widthFix" class="check_icon">
										</image>
										<image v-else src="https://app.asy315.vip/s/m/images/cha.png" mode="widthFix"
											class="check_icon">
										</image>
									</view>
								</view>
							</view>
							<view class="info" v-if="info.customer.website || info.customer.applet">
								<view class="left">公司网址</view>
								<view class="right">
									<u-link :href="info.customer.website">{{info.customer.website}}</u-link>
								</view>
							</view>
							<view class="info" v-if="info.resellerNameCn">
								<view class="left">经销商</view>
								<view class="right">{{info.resellerNameCn}}</view>
							</view>
							<view class="info" v-for="(item,index) in extraInfo" :key="index">
								<view class="left">{{item.key}}</view>
								<view class="right">{{item.value}}</view>
							</view>
							<view class="info">
								<view class="left">查询时间</view>
								<view class="right" v-if="info.label.id">
									<view>{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}</view>
									<view>首次查询</view>
								</view>
								<view class="right" v-else>
									您查询的防伪码不存在
								</view>
							</view>
							<view class="info" v-if="info.label.queryTimes" @click="isShowQueryTimes=!isShowQueryTimes">
								<view class="left">查询次数</view>
								<view class="right" v-if="isRight">
									<view>{{info.label.queryTimes}}</view>
									<view style="margin-top: 30rpx;" v-show="isShowQueryTimes">
										<view v-if="info.label.queryTimes>1">
											该防伪码已被查询
											<text
												style="color: #1e9fff;margin: 0 10rpx;">{{info.label.queryTimes}}</text>
											次。首次查询时间: <text
												style="color: #1e9fff;margin: 0 10rpx;">{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}。</text>
											请注意，此防伪码已被多次查询, 谨防假冒!
											更多防伪知识请下载<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun</u-link>APP
										</view>
										<view v-else>
											当前查询为首次查询，查询时间: <text
												style="color: #1e9fff;margin: 0 10rpx;">{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}。</text>
											更多防伪知识请下载<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun</u-link>APP
										</view>
									</view>
								</view>
								<view class="right" style="color: #ff2d2d;" v-else>
									该防伪码无效
								</view>
							</view>
							<view class="info" v-if="isShowCheck" @click="isShowCheckCode=!isShowCheckCode">
								<view class="left">防伪校验</view>
								<view class="right">
									<view class="info-line">
										<text v-for="(item,index) in checkCode" :key="index"
											:class="item.class">{{item.value}}</text>
										<image v-if="isRight" src="https://app.asy315.vip/s/m/images/tick.png"
											mode="widthFix" class="check_icon">
										</image>
										<image v-else src="https://app.asy315.vip/s/m/images/cha.png" mode="widthFix"
											class="check_icon">
										</image>
									</view>
									<view style="margin-top: 30rpx;" v-show="isShowCheckCode">
										{{info.checkCode}}
									</view>
								</view>
							</view>
							<view class="tips" v-if="isShowChekFlag&&isRight">
								<!-- <view class="left">二次校验</view> -->
								<view class="right">该防伪码支持二次校验，请下载“<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun
									</u-link>”进行校验。</view>
							</view>
							<view class="videoView" v-if="videoSrc">
								<video :src="videoSrc" controls :autoplay="true"></video>
							</view>
						</view>
					</view>
					<!-- 				<view class="contentView" style="color: #154bc3;" v-else>
						请输入防伪码或者点击扫码按键进行防伪验证。
					</view> -->
				</view>
			</view>
			<view class="btn_hide" @click="scanHideCode">
				识别隐码
			</view>
			<view class="fourth">
				<image class="down" src="https://app.asy315.vip/s/m/images/download.png" mode="widthFix"
					style="width: 100%;" @click="download">
				</image>
				<view class="sw_view" v-if="sw_list.length>0&&sw_list.length!=1">
					<u-swiper :list="sw_list" duration="500" height="1300" img-mode="aspectFit"></u-swiper>
				</view>
				<image v-else :src="sw_list[0].image" mode="widthFix" style="width: 100%;margin-top: 40rpx;"></image>
			</view>
		
			<!-- 			<view style="text-align: center;color: #1e9fff;">
				<navigator url="plugin://kivicube-slam/scene?id=fbf110cba95a480ea3a18a8878700fe2">点击打开3D场景展示</navigator>
			</view> -->
			<view class="fifth">
				<view class="title">
					<view class="left">关于我们</view>
					<!-- 				<view class="right">
						<image src="https://app.asy315.vip/s/m/images/xia.png" mode="widthFix" style="width: 30rpx;"></image>
					</view> -->
				</view>
				<view class="infoView">
					<view class="qr">
						<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;">
						</image>
					</view>
					<view class="info">
						<view class="item">
							<view class="right">艾斯芸防伪科技有限公司</view>
						</view>
						<view class="item">
							<view class="right">电话：
								<!-- #ifdef H5 -->
								<a style="color: rgb(41, 121, 255);text-decoration: none;"
									href="tel:+86 15989366075">+86
									15989366075</a>
									<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text>+86 15989366075</text>
								<!-- #endif -->
							</view>
						</view>
						<view class="item">
							<view class="right">邮箱：
								<!-- #ifdef H5 -->
								<a style="color: rgb(41, 121, 255);text-decoration: none;"
									href="mailto:asy315@asy315.com">asy315@asy315.com</a>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text>asy315@asy315.com</text>
								<!-- #endif -->
							</view>
						</view>
						<view class="item">
							<view class="right">深圳市南山区粤海街道科发路3号中电长城大厦北塔1205</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				ICP备案编号：粤ICP备18119196号-1
			</view>
		</view>
		</image>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					code: '',
					comcode: ''
				},
				rules: {
					code: [{
						required: true,
						message: '请输入防伪码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				},
				queryBtn: {
					backgroundColor: "#086B8B",
					color: "#fff",
					width: "64rpx",
					height: "64rpx",
					padding: "0",
					margin: "0 10rpx"
				},
				imgSrc: "",
				imgSrc1: [],
				info: {
					checkCode: "",
					customer: {
						nameCn: "",
						phone: "",
						website: "",
						applet: ""
					},
					label: {
						id: 0,
						queryTimes: "",
						firstTime: "",
						code: ""
					},
					code: [],
					resellerNameCn: ''
				},
				extraInfo: [],
				appUrl: "",
				sw_list: [{
					image: ""
				}],
				image2: [],
				formData: {
					code: "",
					ip: "",
					city: "",
					longitude: "",
					latitude: "",
					deviceInfo: "",
					querySource: "applet",
					mapType: 0
				},
				videoSrc: "",
				isShowChekFlag: false,
				isShowPage: false,
				isShowCheck: true,
				isShowCheckCode: false,
				isShowQueryTimes: false,
				isRight: false,
				checkCode: "",
				imgWidth: false,
				interval: '',
				flag: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if (option.q) {
				let url = decodeURIComponent(option.q)
				let str = this.getUrlCode('c', url)
				let pattern = /^\d+$/; // 匹配由一或多个数字组成的字符串
				if (pattern.test(str)) {
					this.form.code = str
					setTimeout(() => {
						this.search()
					}, 500)
				} else {
					uni.redirectTo({
						url: `/pages/erp?ticket=${str}`
					})
				}
			} else if (option.c) {
				this.form.code = option.c
				if (this.form.code) {
					setTimeout(() => {
						this.search()
					}, 500)
				}
			}
			this.isShowPage = true
		},
		onShow() {
			let that = this
			uni.$once('isRefresh', function(data) {
				console.log("aaaaaaa:", data)
				if (data.errno) {
					uni.showToast({
						title: '识别失败，请求被拒绝',
						type: 'error',
					})
					return
				}
				if (data.data) {
					that.handleCodeInfo(data)
					uni.showToast({
						title: '识别隐码成功',
						type: 'success',
					})
				} else {
					uni.showToast({
						title: '查询失败，无该防伪码信息',
						type: 'success',
					})
				}

				// that.form.code = data
				// console.log('监听到事件来自返回的参数1：' + that.form);
				// 	console.log('监听到事件来自返回的参数2：' + that.form.code);
				// if (that.form.code) {
				// 		console.log('监听到事件来自返回的参数3：' + that.form.code);
				// 	setTimeout(() => {
				// 			console.log('监听到事件来自返回的参数4：' + that.form.code);
				// 		that.search()
				// 	}, 500)
				// }
				that.isShowPage = true
			})
		},
		methods: {
			// 获取图片信息
			getImgInfo() {
				uni.getImageInfo({
					src: this.imgSrc,
					success: (image) => {
						if (image.width >= 400) {
							this.imgWidth = true
						} else {
							this.imgWidth = false
						}
					}
				});
			},
			getUrlCode: function(name, url) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [,
					''
				])[1].replace(/\+/g, '%20')) || null
			},
			scanHideCode() {
				uni.navigateTo({
					url: '/pagesA/scan'
				})
			},
			scanCode(status) {
				//-----------------------------------------------
				this.$scan.scanCode(status).then(res => {
					this.form.code = res
					setTimeout(() => {
						this.search()
					}, 500)
				})
			},
			search() {
				console.log("form", this.form);
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							mask: true,
							title: "查询中..."
						})
						this.$u.api.labelQuery1(this.form).then(res => {
							this.handleCodeInfo(res)
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			handleCodeInfo(res) {
				this.info.code = []
				this.imgSrc1 = []
				console.log("结果:", res.data)
				if (res.data.label.id == 0) {
					console.log("aaaaa:", res)
					this.isRight = false
					this.info.label.id = res.data.label.id
					this.info.customer.nameCn = "无法找到"
					this.info.label.queryTimes = '';
					this.sw_list = [{
						image: ""
					}];
					this.videoSrc = ''
					this.isShowChekFlag = false;
					this.imgSrc = this.$u.http.config.baseUrl + '/' + res.data
						.batchImage
					this.imgSrc1.push(this.imgSrc)
					this.info.checkCode = ''
					let codeNum = this.form.code.split('')
					for (let i = 0; i <= codeNum.length; i++) {
						let obj = {
							value: codeNum[i],
							class: ""
						}
						this.info.code.push(obj)
					}
					let codeArr = this.$u.deepClone(this.info.code);
					for (let i = 0; i < codeArr.length; i++) {
						if (codeArr[i].class != "active") {
							codeArr[i].value = "x"
						}
					}
					this.checkCode = codeArr
					this.isShowPage = true
				} else {
					console.log("aaaaa2:", res)
					this.showPageInfo(res)
				}
			},
			showPageInfo(res, status) {
				console.log("aaaaa3:", res.data.isInvalid)
				if (res.data.isInvalid == 'true') {
					this.isRight = false
				} else {
					this.isRight = true
				}
				this.info = res.data
				let code = []
				let codeNum = this.info.label.code.split('').reverse()
				for (let i = 1; i <= codeNum.length; i++) {
					if (i == this.info.checkCodeValue) {
						let obj = {
							value: codeNum[i - 1],
							class: "active"
						}
						code.push(obj)
					} else {
						let obj = {
							value: codeNum[i - 1],
							class: ""
						}
						code.push(obj)
					}
				}
				this.info.code = code.reverse()
				if (this.info.checkCodeValue) {
					this.isShowCheck = true
					let codeArr = this.$u.deepClone(this.info.code);
					for (let i = 0; i < codeArr.length; i++) {
						if (codeArr[i].class != "active") {
							codeArr[i].value = "x"
						}
					}
					this.checkCode = codeArr
				} else {
					this.isShowCheck = false
				}
				if (this.info.checkImage) {
					if (this.info.checkImage.length > 100) {
						this.imgSrc = "data:image/png;base64," + this.info
							.checkImage
					} else {
						this.imgSrc = this.$u.http.config.baseUrl + this.info
							.checkImage
					}
				} else {
					this.imgSrc = this.$u.http.config.baseUrl + '/' + res.data
						.batchImage
				}
				this.imgSrc1.push(this.imgSrc)
				if (this.info.appUrl) {
					this.appUrl = this.$u.http.config.baseUrl + this.info.appUrl
				} else {
					this.appUrl = this.$u.http.config.baseUrl + '/open/app'
				}
				if (this.info.product.image2) {
					this.sw_list = []
					let imagArr = this.info.product.image2.split(',')
					imagArr.forEach(v => {
						let obj = {
							image: this.$u.http.config.baseUrl + v
						}
						this.sw_list.push(obj)
					})
				}
				if (this.info.product.antiVideo) {
					this.videoSrc = this.info.product.antiVideo
				} else {
					this.videoSrc = ''
				}
				if (this.info.checkFlag == "true") {
					this.isShowChekFlag = true
				} else {
					this.isShowChekFlag = false
				}
				this.extraInfo = []
				if ('extra' in this.info) {
					let info = JSON.parse(this.info.extra.content)
					for (let i in info) {
						let obj = {
							key: info[i].key,
							value: info[i].value
						}
						this.extraInfo.push(obj)
					}
				} else {
					this.extraInfo = []
				}
				this.getImgInfo()
				this.getLocation()
			},
			// 获取用户位置
			getLocation() {
				this.$location.location().then(res => {
					console.log(res);
					this.formData.longitude = res.longitude
					this.formData.latitude = res.latitude
					this.formData.ip = res.ip
					this.formData.city = res.city
					this.formData.deviceInfo = res.deviceInfo
					this.postUserLocation()
				}).catch(e => {
					this.formData.longitude = e.longitude
					this.formData.latitude = e.latitude
					this.formData.ip = e.ip
					this.formData.city = e.city
					this.formData.deviceInfo = e.deviceInfo
					this.postUserLocation()
				})
			},
			// 提交用户位置信息
			postUserLocation() {
				this.formData.code = this.form.code
				this.$postlocation.postLocation(this.formData)
			},
			preview() {
				uni.previewImage({
					current: 0,
					urls: this.imgSrc1,
					success: () => {},
					fail: () => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;

		.first {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		@media screen and (min-width: 480px) {
			.second {
				height: 1376rpx !important;
			}
		}

		.btn_hide {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			padding: 20rpx;
			margin-left: 34rpx;
			margin-right: 34rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 4rpx 6rpx 0px rgba(0, 0, 0, 0.1);
		}

		.second {
			height: 480rpx;
			background-image: url(https://app.asy315.vip/s/m/images/bg.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: 0 -10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 100rpx;

			.query_img_b {
				margin: 14rpx 0 27rpx 0;
			}

			.inputView {
				width: 100%;
				display: flex;
				margin-top: 30rpx;

				.form {
					flex: 1;

					/deep/ .u-form-item {
						padding: 0;
						line-height: normal;
					}

					.input {
						background-color: #fff;
						width: 100%;
					}

					/deep/ .u-input {
						background-color: #fff;
						width: 100%;
					}
				}
			}
		}

		@media screen and (min-width: 480px) {
			.third {
				margin-top: -170rpx !important;
			}
		}

		.third {
			padding: 0 30rpx;
			margin-top: -60rpx;

			@media screen and (min-width: 480px) {
				.content {
					padding: 70rpx !important;
				}
			}

			.content {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				box-shadow: 0px 4rpx 24rpx 0px rgba(0, 0, 0, .2);

				.itemView {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.item {
						text-align: center;
					}
				}

				.contentView {

					.imgView {
						text-align: center;
						margin-bottom: 40rpx;
					}

					.infoView {
						.info {
							display: flex;
							margin-bottom: 30rpx;
							padding-bottom: 30rpx;
							border-bottom: 1px dashed #636363;

							.left {
								// text-align: right;
								margin-right: 20rpx;
								font-size: 28rpx;
								color: #666;
								flex: 0.5;
								letter-spacing: 4rpx;
							}

							.right {
								flex: 1;
								text-align: right;
								padding-right: 30rpx;
								word-break: break-word;

								.active {
									background-color: #000;
									color: #fff;
									font-weight: bold;
								}

								.check_icon {
									width: 40rpx;
									margin-left: 20rpx;
								}
							}

							.info-line {
								display: flex;
								align-items: center;
								justify-content: flex-end;
							}
						}

						.tips {
							padding: 20rpx;
							text-align: center;
							color: #666;
							margin-bottom: 20rpx;
							// border-bottom: 1px dashed #636363;
						}

						.videoView {
							video {
								width: 100%;
								height: 300rpx;
							}
						}
					}
				}
			}
		}

		.fourth {
			padding: 60rpx 30rpx 0rpx 30rpx;

			.down {
				box-shadow: 0px 13px 25px 11px rgba(0, 0, 0, 0.11);
			}

			.sw_view {
				background: #FFFFFF;
				box-shadow: 0px 13px 25px 11px rgba(0, 0, 0, 0.11);
				border-radius: 30px;
				margin-top: 60rpx;
			}
		}

		.fifth {
			padding: 0 30rpx;
			text-align: center;

			.title {
				margin: 40rpx;
				font-weight: bold;
			}

			.infoView {

				.qr {
					margin-bottom: 30rpx;
				}

				.item {
					margin-bottom: 18rpx;
					color: #666;
				}
			}
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #333;
			padding: 30rpx;
			color: #fff;
			width: 100%;
		}

		.popView {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #0a3081;
		}
	}
</style>